<script setup>
import { onMounted } from "vue";
import { user } from "@/constants/mock.js";
import { checkLogin } from "@/utils/auth.js";
import NavBar from "@/components/NavBar/index.vue";
import TabBar from "@/components/TabBar/index.vue";
import WeatherInfo from "@/components/WeatherInfo/index.vue";

onMounted(async () => {
  console.log("home page mounted");
  
  const logined = await checkLogin();
  console.log("logined", logined);
  if (!logined) {
    uni.redirectTo({
      url: "/pages/Login/index",
    });
  }
});

function swithToCar() {
  uni.navigateTo({
    url: "/pages/Rent/index",
  });
}
</script>

<template>
  <div class="container">
    <NavBar></NavBar>
    <div class="header">
      <div class="info">
        <span class="info-welcome">您好，{{ user.name }}</span>
        <WeatherInfo></WeatherInfo>
      </div>
      <div class="info-desc">欢迎回来</div>
    </div>
    <div class="home-content">
      <div class="home-card" @click="swithToCar()">
        <div class="home-card-title">我要租车</div>
      </div>
      <div class="home-card">
        <div class="home-card-title">领取早餐</div>
      </div>
    </div>
    <!-- <TabBar :tabIndex="0"></TabBar> -->
  </div>
</template>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;

  background: linear-gradient(180deg, #c3e4b3 0%, #f5fff0 100%);
  overflow-y: hidden;
}

.info {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.info-welcome {
  font-size: 24px;
  font-weight: 600;
}

.info-desc {
  font-size: 16px;
  color: #00000080;
}

.home-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 60px;
}

.home-card {
  width: 100%;
  height: 146px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 12px;
  background-color: #f7fff3;
  border-radius: 10px;

  box-sizing: border-box;
}
</style>
